<!--
 * @Description: 软终端日志 - 上下线
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:26:28
 * @LastEditTime: 2021-09-28 10:51:08
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" label-width="80px" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 序列号 -->
              <el-form-item label="序列号">
                <el-input v-model.trim="filterSearch.deviceId" placeholder="请输入序列号"></el-input>
              </el-form-item>
            </el-col>
            <!-- 搜索 重置 -->
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- ID -->
      <el-table-column
        v-if="columns[0].show"
        align="center"
        width="100"
        label="ID"
        sortable
        prop="id"
      />
      <!-- 软终端名称 -->
      <el-table-column
        v-if="columns[1].show"
        min-width="150"
        show-overflow-tooltip
        label="软终端名称"
        prop="deviceName"
      />
      <!-- 序列号 -->
      <el-table-column
        v-if="columns[2].show"
        align="center"
        width="280"
        label="序列号"
        show-overflow-tooltip
        prop="deviceId"
      />
      <!-- 登录时间 -->
      <el-table-column
        v-if="columns[3].show"
        align="center"
        width="170"
        sortable
        label="登录时间"
        prop="loginInTime"
      >
        <template slot-scope="scope">{{ scope.row.loginInTime | filterTime }}</template>
      </el-table-column>
      <!-- 登出时间 -->
      <el-table-column
        v-if="columns[4].show"
        align="center"
        width="170"
        sortable
        label="登出时间"
        prop="loginOutTime"
      >
        <template slot-scope="scope">{{ scope.row.loginOutTime | filterTime }}</template>
      </el-table-column>
      <!-- 隧道状态 100 正常、101 无法建立隧道、102 VPN隧道已断开-->
      <el-table-column
        v-if="columns[5].show"
        align="center"
        width="130"
        sortable
        label="隧道状态"
        prop="tunnelStatus"
      >
        <template
          slot-scope="scope"
        >{{ scope.row.tunnelStatus === 100 ? '正常' : scope.row.tunnelStatus === 101 ? '无法建立隧道' : 'VPN隧道已断开'}}</template>
      </el-table-column>
      <!-- 出方向速率 -->
      <el-table-column
        v-if="columns[6].show"
        align="center"
        width="120"
        label="出方向速率"
        sortable
        prop="upStreamRate"
      >
        <template slot-scope="scope">{{ scope.row.upStreamRate }}kbps</template>
      </el-table-column>
      <!-- 入方向速率 -->
      <el-table-column
        v-if="columns[7].show"
        align="center"
        width="120"
        label="入方向速率"
        sortable
        prop="downStreamRate"
      >
        <template slot-scope="scope">{{ scope.row.downStreamRate }}kbps</template>
      </el-table-column>
      <!-- 时延 -->
      <el-table-column
        v-if="columns[8].show"
        align="center"
        width="100"
        label="时延"
        sortable
        prop="latency"
      >
        <template slot-scope="scope">{{ scope.row.latency }}ms</template>
      </el-table-column>
      <!-- 抖动 -->
      <el-table-column
        v-if="columns[9].show"
        align="center"
        width="100"
        label="抖动"
        sortable
        prop="jitter"
      >
        <template slot-scope="scope">{{ scope.row.jitter }}ms</template>
      </el-table-column>
      <!-- 丢包率 -->
      <el-table-column
        v-if="columns[10].show"
        align="center"
        width="100"
        sortable
        label="丢包率"
        prop="loss"
      >
        <template slot-scope="scope">{{ scope.row.loss }}%</template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column
        v-if="columns[11].show"
        align="center"
        width="170"
        sortable
        label="创建时间"
        prop="createTime"
      >
        <template slot-scope="scope">{{ scope.row.createTime | filterTime }}</template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dataList: [],
      filterSearch: {
        deviceId: null
      },
      columns: [
        { name: 'ID', show: true },
        { name: '软终端名称', show: true },
        { name: '序列号', show: true },
        { name: '登录时间', show: true },
        { name: '登出时间', show: true },
        { name: '隧道状态', show: true },
        { name: '上行速率', show: true },
        { name: '下行速率', show: true },
        { name: '时延', show: true },
        { name: '抖动', show: true },
        { name: '丢包率', show: true },
        { name: '创建时间', show: true }
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    }
  },
  methods: {
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        deviceId: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        deviceId: _this.filterSearch.deviceId,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/vpn/server/log',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { count, objects } = resultBody;
          _this.page.total = count;
          _this.dataList = objects;
        }

      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
  }

  ::v-deep .el-dialog__body {
    padding-bottom: 0;
  }
}
.on-off-box {
  float: left;
  margin-bottom: 15px;
}
.i-out {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de4040;
  position: relative;
  top: 1px;
}
.i-login {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #67c23a;
  position: relative;
  top: 1px;
}
</style>